<template>
   <li class="item">
      <div class="card">
         <div class="img">
             <img :src="require(`../../assets/img/${item.name}.jpg`)"/>
             <div class="mask">
                <h1 > {{ item.name }}</h1>
                <h2 >{{ item.festival }}</h2>
             </div>
         </div>
         <div class="text">
             <h1>假期描述：{{ item.desc||'无说明' }}</h1>
              <h1>拼假建议：{{ item.rest || '无说明'}}</h1>
         </div>
        </div> 
    </li>
</template>

<script>
export default {
    props:{
        item:Object,
        default: () => ({
      name: 'bg'  // 设置默认的 name 属性值
    })
    }
}
</script>

<style lang="less" scoped>
.item{
    padding: .1rem .15rem;
    box-sizing: border-box;

.card{
    border: 1px solid #ddd;
    border-radius: .15rem;
    overflow: hidden;
    background: #fff;
    box-shadow: .01rem .03rem .05rem #999;
    .img{
        position: relative;
        height: 2.15rem;
   
    .mask{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    h1{
        color: #ed4040;
        font-size: .5rem;
        font-weight: bold;
    }
    h2{
        color: #fff;
        margin-top: .15rem;
    }
    }}
    .text{
        padding: .1rem;
        box-sizing: border-box;
        h1{
            font-size: .16rem;
            line-height: .2rem;
        }
        h2{
            font-size: .14rem;
            line-height: .2rem;
            margin-top: .1rem;
        }
    }
}}
</style>